<template>
    <div>
        <div class="header">
            <p class="title">待办事项</p>
            <van-field
                class="new-todo"
                v-model.trim="name"
                @keyup.enter="addTask"
                center
                clearable
                label="输入新任务"
                placeholder="请填写任务"
            >
                <template #button>
                    <van-button
                        size="small"
                        type="primary"
                        :disabled="!isValidInput"
                        @click="addTask"
                    >
                        增加
                    </van-button>
                </template>
            </van-field>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
        };
    },
    computed: {
        // 计算属性用于验证输入是否有效
        isValidInput() {
            return this.name.trim()!== '';
        },
    },
    methods: {
        addTask() {
            if (this.isValidInput) {
                this.$emit('addTodo', this.name);
                this.name = '';
            }
        },
    },
};
</script>

<style scoped>
.header {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.title {
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    color: #b83f45;
}

.new-todo {
    width: 100%;
    padding: 20px;
		padding-bottom:40px ;
    height: 20px;
    border: none;
    border-top: 2px solid #ededed;
}
</style>    